<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }
        
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="tools.js"></script>
    <script>
        window.onload = function() {
            //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
            //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
            //      技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
            //步骤：
            //1.老三步
            var img = document.getElementsByTagName("img")[0];
            window.onscroll = function() {
                    //被卷去的距离大于200显示小火箭，否则隐藏
                    //2.显示隐藏小火箭
                    if (scroll().top > 1000) {
                        img.style.display = "block";
                    } else {
                        img.style.display = "none";
                    }
                    //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
                    leader = scroll().top;
                }
                //3.缓动跳转到页面最顶端（利用我们的缓动动画）
            var timer = null;
            var target = 0; //目标位置
            var leader = 0; //显示区域自身的位置
            img.onclick = function() {
                //技术点：window.scrollTo(0,0);
                //要用定时器，先清定时器
                clearInterval(timer);
                timer = setInterval(function() {
                    //获取步长
                    var step = (target - leader) / 10;
                    //二次处理步长
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step; //往上移动的过程中，step是负数。当前位置减去步长，就等于下一步的位置。
                    //显示区域移动
                    window.scrollTo(0, leader);
                    //清除定时器
                    if (leader === 0) {
                        clearInterval(timer);
                    }
                }, 25);
            }
        }
    </script>
</head>

<body>
    <img src="images/Top.jpg" />
    <div>
        我是最顶端.....<br> 生命壹号，永不止步.....
        <br> 生命壹号，永不止步.....
        <br> 生命壹号，永不止步.....
        <br> 生命壹号，永不止步.....
        <br> 生命壹号，永不止步.....
        <br> 生命壹号，永不止步.....
        <br> 生命壹号，永不止步.....
        <br>
    </div>
</body>

</html>